<template>
<div >
  <a-alert type="info" >
    <template slot='message'>
      <a-row >
        <a-col :span='8'>总工单：{{ statistics.total }}</a-col>
        <a-col :span='8'>办结率：{{statistics.completionRate}}</a-col>
        <a-col :span='8'>环比：{{statistics.annulus}}</a-col>
      </a-row>
    </template>
  </a-alert>
  <a-table
    ref='table'
    size='middle'
    bordered
    childrenColumnName='childrenColumnName'
    :columns='columns'
    :dataSource='dataSource'
    :loading='loading'
    :pagination="false"
  >


    <span slot='action' slot-scope='text, record,index'>
            <a @click='handleEdit(record)'> 编辑 </a>
            <a-divider type='vertical' />
            <a @click='handleDetail(record.categoryId)'> 详情 </a>
    </span>
  </a-table>

  <statistics-add-order-detail-modal ref='orderModal' @updateCategory="loadDate"></statistics-add-order-detail-modal>
  <category-statistics-edit-modal ref='editModal' @updateCategory="loadDate"></category-statistics-edit-modal>
</div>
</template>

<script>
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'
import StatisticsAddOrderDetailModal
  from '@views/data-governance/smart-reports/epidemic-daily/components/StatisticsAddOrderDetailModal'
import CategoryStatisticsEditModal
  from '@views/data-governance/smart-reports/epidemic-daily/components/CategoryStatisticsEditModal'

export default {
  name: 'Step2',
  components:{
    StatisticsAddOrderDetailModal,
    CategoryStatisticsEditModal
  },
  data() {
    return {
      loading:false,
      ds:'',
      dataSource: [],
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => 1 + index
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center'
        },
        {
          title: '内容',
          align: 'center',
          dataIndex: 'content',
          ellipsis: true,
        },
        {
          title: '工单数',
          align: 'center',
          dataIndex: 'num',
          ellipsis: true,
        },
        {
          title: '环比（%）',
          align: 'center',
          dataIndex: 'annulus',
          ellipsis: true,
        },
        {
          title: '占比（%）',
          align: 'center',
          dataIndex: 'proportion',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      statistics:{}
    }
  },
  created() {

  },
  methods:{
    async begin(ds){
      this.ds=ds;
      this.loading=true;
      console.log(this.ds)
      await ReportsEpidemicDailyService.categorizedEpidemicOrder(this.ds).then(res=>{
        if(res.success){
          if(res.result==true) {
            this.$message.success("生成成功")
          }
        }
      })
      await this.loadDate();
      await this.getReportsEpidemicStatistics()
      this.loading=false;
    },
    getReportsEpidemicStatistics(){
      ReportsEpidemicDailyService.getReportsEpidemicStatistics(this.ds).then(res=>{
        this.statistics=res.result
      })
    },
    loadDate(){
      this.dataSource=[]
      ReportsEpidemicDailyService.getCategoryTemplateStatistics(this.ds).then(res=>{
        if (res.success) {
          this.dataSource = res.result
          console.log(this.dataSource)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleDetail(categoryId){
      this.$refs.orderModal.open(this.ds,categoryId)
    },
    handleEdit(item){
      this.$refs.editModal.open(item)
    }
  }
}
</script>

<style scoped>

</style>